<template>
  <view>
    <cmd-nav-bar title="我的信息"></cmd-nav-bar>
    <cmd-page-body type="top">
      <cmd-transition name="fade-up">
        <view>
          <cmd-cel-item title="头像" slot-right arrow>
            <cmd-avatar src="https://avatar.bbs.miui.com/images/noavatar_small.gif"></cmd-avatar>
          </cmd-cel-item>
					<cmd-cel-item title="ID" :addon="mess.userId" arrow></cmd-cel-item>
          <cmd-cel-item title="账户" :addon="mess.username" arrow></cmd-cel-item>
					<cmd-cel-item title="性别" addon="男" arrow></cmd-cel-item>
          <cmd-cel-item title="昵称" :addon="mess.nickName" arrow></cmd-cel-item>
          <cmd-cel-item title="修改密码" arrow></cmd-cel-item>
          <button class="btn-logout" @click="bindLogout">退出登录</button>
        </view>
      </cmd-transition>
    </cmd-page-body>
  </view>
</template>

<script>
  import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
  import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
  import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
  import cmdCelItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
  import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	
  export default {
    components: {
      cmdNavBar,
      cmdPageBody,
      cmdTransition,
      cmdCelItem,
      cmdAvatar
    },
		computed: {
			...mapState(['mess', 'thing', 'userName'])
		},
    data() {
      return {
				
			}
    },
		methods: {
			...mapMutations(['logout']),
			bindLogout() {
				/**
				 * 跳转回登录页面
				 */
				uni.reLaunch({
					url: '../login/login',
				});
			}
		}
  }
</script>

<style lang="scss">
  .btn-logout {
    margin-top: 100upx;
    width: 80%;
    border-radius: 50upx;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #0faeff, #87CEEB);

    &-hover {
      background: linear-gradient(to right, #0faeff, #87CEEB);
    }
  }
</style>
